<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 直接写JavaScript脚本 不推荐 -->
            <button v-on:click='num++'>点击加一</button>
        </div>
        <div>
            <!-- v-on 简写，直接写JavaScript脚本 不推荐 -->
            <button @click='num++'>点击加一</button>
        </div>
        <div>
            <!-- 绑定方法（无参） 推荐 -->
            <button @click='clickMethod1'>方法点击一</button>
        </div>
        <div>
            <!-- 绑定方法（有参参） 推荐 -->
            <!-- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event  -->
            <button @click="clickMethod2(9, 10, $event)">方法点击二</button>
        </div>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: '0'
            },
            methods: {
                // 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
                clickMethod1: function (event) {
                    console.log(event.target.innerHTML)
                },
                clickMethod2: function (param1, param2, event) {
                    console.log(param1, param2)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
</body>

</html>